/** @jsxImportSource @emotion/react */
import {css} from "@emotion/react";
import * as React from "react";
import {
    useTheme, InputLine, TextArea, Text, BlobInputList, Button, InputDatalist, SuffixInput, useToast
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, useInputControlSure, useItemInputControl
} from "../../common/base";
import {EditStorageContext} from "../../StorageContext";
import {Each_ZdSetting, useTableEditor} from "../../hook/useRepTableEditor";
import {useMeasureInpFilter} from "../../common/hooks";
import {useUppyUpload} from "../../hook/useUppyUpload";
import {FixedTableEditor, } from "../../common/ftable";
import {useMedia} from "use-media";
import {assertNamesUnique} from "../../common/eHelper";

export const config射线源=[{t:'管电压：',n:'管压',u:'KV'},{t:'源活度',n:'源活',u:'Ci'},{t:'管电流',n:'管电',u:'mA'}];
const itemA测点位置=['示图说明','_FILE_S部位','检测结果'];
for(let {n} of config射线源){
    itemA测点位置.push(n);
}
//只能上不变的：不能hook是死循环
const defaultValCb= (par: { 检测结果?: any; })=>{
    const { 检测结果 }=par||{};
    if(!检测结果)   par.检测结果='该装置各管道焊接接头经射线检测抽查，发现存在未焊透和气孔等缺陷，和202 年 月（报告编号：SM202 ）定期检验相比未见异常。根据TSG D7005-2018《压力管道定期检验规则－工业管道》第3.2.6.2（4）条和3.2.4条进行评级，安全状况等级评为 级。';
    return  par;
}
export const ResultDiagram=
  React.forwardRef((
    { children, show ,alone=true,redId,nestMd, repId}:InternalItemProps,  ref
  ) => {
      const {modified,setModified,} =React.useContext(EditStorageContext) as any;
      const [getInpFilter] = useMeasureInpFilter(null, itemA测点位置, defaultValCb);
      const {inp, setInp,onSure} = useInputControlSure({ ref,redId,nestMd });
      const onFinish = React.useCallback(async(upfile: any, del:boolean) => {
          onSure({...inp, '_FILE_S部位': upfile});
          !modified && setModified(true);
      }, [inp, modified,onSure,setModified]);
      const [uploadDom]=useUppyUpload({ repId:repId!,
          maxFile:5, onFinish, storeObj: inp?._FILE_S部位
      });

    return (
      <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show} redId={redId} nestMd={nestMd}
                           alone={alone}  label={'射线检测结果，射线源，示意图'}>
          射线源的：
          <div css={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-evenly'}}>
              {config射线源.map(({t: title, n: name, u: unit}, i: number) => {
                 return <div key={i} css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                      {title}
                      <SuffixInput value={inp?.[name] || ''} size={11}
                                   style={{display: 'inline-flex', width: 'unset'}}  textStyle={css`align-items:center;`}
                                   onSave={txt => setInp({...inp, [name]: txt || undefined}) }
                              >{unit}</SuffixInput>
                      </div>;
              }) }
          </div>
          <hr/>
          <InputLine label='检测部位（布片示意图）：'>
              <BlobInputList value={inp?.示图说明 || ''} rows={5} datalist={["1、该装置管道焊接接头射线检测抽查部位见管道单线图所示。\n2、备注中H为缺陷自身高度。"]}
                             onListChange={v => setInp({...inp, 示图说明: v || undefined}) } />
          </InputLine>
          检测示意图；允许多文件(图)：
          {uploadDom}
        检测结果:
        <TextArea  value={inp?.检测结果 ||''} rows={8}
                 onChange={e => setInp({ ...inp, 检测结果: e.currentTarget.value||undefined}) } />
        {children}
      </InspectRecordLayout>
    );
} );

const 透照技术选=['单胶片' ];
const 源种类选=['X射线' ];
const 增感方式选=['铅箔' ];
const 检测技术等级=['AB级' ];
//古怪啊： 报告的标题view 和编辑器里面的text，分开的情形：需要修正标题字体格式。
const render技等级={
    view:(orc:any)=>{
        return <Text css={{fontSize:'0.7rem'}}>检测技术等级</Text>
    },
    text: '检测技术等级',         //标题的文本
    //edit: (inp, setinp)=>{} 编辑器组件的。
};
/**必须从上级的 _$设备名称 _$eqpcod，才能提取：分项报告只能约束到特定标号的分项对象底下提取的，所以没有像主报告一样能读到 # orc=parentOrc['_RADIO_TS_'+surpId];。
 * 分项的第一行 设备编号:允许自己修改的；
 * 【特殊性】配置的扩展？ 这底下的： render技等级 ： 定制了标题的 样式。
 * */
export const config测量仪 = [
    [['设备名称', '_$设备名称'], ['设备编号', {n:'设备编',t:'B'}] ],
    [['焊接方法', '焊接法'], ['坡口型式', '坡口型'] ],
    [['检测时机','检时机'], ['热处理状态', '热处理']],
    [['检测标准', '检标准'], ['透照技术', {n:'透照',t:'l',l:透照技术选}]],
    [['源种类', {n:'源种',t:'l',l:源种类选}], ['增感方式', {n:'增感',t:'l',l:增感方式选}]],
    [['仪器型号', '仪器型'], ['仪器编号', '仪器号'], ['焦点尺寸', '焦尺']],
    [['胶片牌号', '片牌'], ['胶片类别', '片类'], ['胶片规格', '片规']],
    [[render技等级, {n:'技等级',t:'l',l:检测技术等级} ], ['底片黑度', '底黑'], ['像质计型号', '像质型']],
    [['冲洗方式', '冲洗式'], ['显影温度', '影温'], ['显影时间', '影时']],
];

//【定做表格编辑器做法2】1，可不采用useTableEditor({editAs });来注入的； 单个回调注入也可以的。
//【优点】这个回调局部化，不需要知道表格名，以及表格的当前操作行号就能保存。 本方式的解耦合较好！存储字段名‘f’要对上。
const cb缺陷= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
   return  <InputDatalist value={(inp?.[name]) || ''} datalist={['0位','70-80mm']}
                   onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
const cb性质= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <InputDatalist value={(inp?.[name]) || ''} datalist={['未焊透/整条','圆形缺陷/5点','未焊透/20mm']}
                           onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
const cb级别= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <InputDatalist value={(inp?.[name]) || ''} datalist={['Ⅳ级','Ⅲ级','Ⅱ级','Ⅰ级']}
                           onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
const cb备注= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <InputDatalist value={(inp?.[name]) || ''} datalist={['H≈0.6','H≈1.0','位置受限','Ф159×4.5H≈0.6']}
                           onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
export const config评定=[['底片编号','n',60],['一次透照长度(mm)','l',80],['缺陷位置','f',65, cb缺陷],
    ['缺陷性质及尺寸（mm）','s',130, cb性质], ['评定级别','C',55, cb级别],['备 注','m',95, cb备注]] as Each_ZdSetting[];
// const 默认漏磁检=[{n:'直管'}];
const itemA评定=['评定表'];
//旧平台仅做了配置，没pdf；
export const EvaluationForm=
    React.forwardRef(({ children, show ,alone=true,refWidth,redId,nestMd}:InternalItemProps,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA评定,);
        const {inp, setInp} = useItemInputControl({ ref,redId,nestMd });
        const tableName='评定表';
        const headview=<Text variant="h5">
            射 线 检 测 底 片 评 定 表。
        </Text>;
        //不用默认Input，想用列表选择输入的： const editAs=(obj:any, setObj:React.Dispatch<React.SetStateAction<any>>, seq:number | null)=>{};
        const [render部位汇总]=useTableEditor({inp, setInp,  headview,
            config: config评定, table:tableName, column:4,  maxRf:3, });

        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}  redId={redId} nestMd={nestMd}
                                 alone={alone}  label={'射 线 检 测 底 片 评 定 表'}>
                {render部位汇总}
            </InspectRecordLayout>
        );
    } );

const 合格级别选=['Ⅰ级' ];
const 透照方式选=['双壁单影'];
/**固定行数的表格， 报告上面可能像特性表那样地行列做倒置。 表格不能增加删除的，各行排序不能变的。表的字段数多，表的行数少而固定的。
 * 类比改款的配置方式;   '规格尺寸(mm)' ；尽量不用类型t:'n'宽度编辑框不能用w来控制。
 * */
export const model工件 = [
    ['工件编号', {n:'n',w:10} ], [{view:'规格尺寸(mm)',text:'规格尺寸'}, {n:'g',w:22,u:'mm'} ], ['材 质', {n:'c',w:8} ],
    ['透照方式', {n:'tz',w:12,t:'l',l:透照方式选} ], [{view:'焦距:F(mm)',text:'焦距:F'}, {n:'F',w:13,u:'mm'} ],
    //中间被通用的固定字段”管电压：“分开了：
    [{view:'曝光时间(min)',text:'曝光时间'}, {n:'b', w:1,u:'min'} ], ['像质指数', {n:'X',w:5} ],
    [{view:'焊缝长度(mm)',text:'焊缝长度'}, {n:'L', w:4,u:'mm'} ], [{view:'一次透照长度(mm)',text:'一次透照长度'}, {n:'Y', w:8,u:'mm'} ],
    [{view:'焊口总数量(个)',text:'焊口总数量'}, {n:'K', w:2,u:'个'} ], [{view:'检测数量(个)',text:'检测数量'}, {n:'T', w:1,u:'个'} ],
    [{view:'拍片数量(张)',text:'拍片数量'}, {n:'s', w:1,u:'张'} ], ['合格级别', {n:'C',w:5,t:'l',l:合格级别选} ],
    ['要求检测比例', {n:'P', w:1,u:'%'} ], ['实际检测比例', {n:'p', w:2,u:'%'} ]
];
/**工件编号 :实际是表格 反转横竖的。
 *  */
const Workpiece4Vrow= ( {table,model,inp,setInp, defaultV,label,nums=6} :
    {table:string,model:any[][],inp: any,setInp: React.Dispatch<React.SetStateAction<any>>,defaultV?:any,label:any,nums?:number}
) => {
    return (
        <div>
            <Text variant="h5">
                {label}: <Button onPress={() => {setInp({ ...inp, 工件表: defaultV});} }>清空全表至默认</Button>
            </Text>
            { (new Array(nums)).fill(null).map(( _,  w:number) => {
                return <React.Fragment key={w}>
                    序号 {w + 1} ：
                    <FixedTableEditor table={table} index={w} model={model} inp={inp} setInp={setInp}/>
                </React.Fragment>;
            })}
        </div>
    );
};

const itemA工件汇总 = ['工件表'];
export const PartSummary =
React.forwardRef(({children, show, alone = true, refWidth, redId, nestMd}: InternalItemProps, ref
) => {
    const [getInpFilter] = useMeasureInpFilter(null, itemA工件汇总,);
    const {inp, setInp} = useItemInputControl({ref, redId, nestMd});

    return (
        <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId} nestMd={nestMd}
                             alone={alone} label={'射线检测-工件编号，曝光时间'}>
            <Workpiece4Vrow table={'工件表'} model={model工件} inp={inp} setInp={setInp} nums={4} label={'工件编号，曝光时间表：四个列分别编排4个编号'}/>
        </InspectRecordLayout>
    );
});


/**【开发测试用的】
 * */
export const EntranceSetup =
    React.forwardRef((
        {children, show, alone = true, repId, verId, rep}: InternalItemProps, ref
    ) => {
        const atPrint = useMedia('print');
        // const theme = useTheme();
        const toast = useToast();
        const checkName = true;      //开发测试完，改成=false, 测试时 REACT_APP_TEST 需设置， 开发模式的校对开关。
        const doCheckNames = React.useCallback((verId: string) => {
            //【承压更少项目】，那些属于公共模板目录的 分项报告的唯一性检查在对方自己检查看。
            const result = assertNamesUnique([{value: rep?.tzFields},
                {value: config测量仪, type:'esnt'},
                {value:[...itemA工件汇总,...itemA测点位置,...itemA评定, ]},
                 ]);
            toast({title: "完成！", subtitle: result ? "没发现冲突" : "测试开关没开", intent: "success"});
        }, [rep,toast]);
        const getInpFilter = React.useCallback((par: any) => {}, []);
        const {inp, setInp} = useItemInputControl({ref});
        if (atPrint) return null;
        else return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={'初始化本报告，默认值配置等'}>
                {checkName && <div>
                    <Text variant="h5">
                        构建开发模板时的工具：校验模板的存储name冲突；
                    </Text>
                    <Button intent='primary' onPress={() => {
                        doCheckNames(verId!);
                    }}>校验模板name唯一性</Button>
                </div>
                }
                <hr/>
            </InspectRecordLayout>
        );
    });

